<!-- 电子公章 -->
<template>
  <div>
    <div class="searchbox">
      <el-form :inline="true" size="small" label-width="100px">
        <jt-easy-collapse :has-expand="true">
          <template slot="expand">
              <el-form-item label="电子公章名称">
                <el-input size="small" v-model="form.name" placeholder="电子公章名称"></el-input>
              </el-form-item>
              <el-form-item label="使用位置">
                <el-input size="small" v-model="form.usePosition" placeholder="使用位置"></el-input>
              </el-form-item>
              <el-form-item style="margin-left: 20px;">
                <el-button size="mini" type="primary" @click='showList'>查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" @click='clearForm'>清除</el-button>
              </el-form-item>
</template>
        </jt-easy-collapse>
      </el-form>
    </div>
    <div class="contentbox">
      <div style="float: left;padding-left: 20px;font-size: 15px;color: #666;padding-top: 6px;">
      共 <span style="color: red;">{{pageTotal}}</span> 条数据      </div>
      <el-row style="float: right;margin-right: 20px;margin-bottom: 15px;" type="flex" justify="end">
        <el-col>
          <jt-table-column-filter tableName='electronicSeal' :table-key.sync="tableKey" :header-data.sync="tableHeaderArr" :filter-column.sync="filterColumnData"></jt-table-column-filter>
          <el-button size="small" type="primary" @click="addOrder">新增</el-button>
           <el-button size="small" type="primary" @click="deleteBatch">批量删除</el-button>
        </el-col>
      </el-row>
      <add-seal :show.sync="isShowAdd" @refreshAdd="showList"></add-seal>
      <edit-seal :show.sync="isShowModify" :modifyId="modifyId" @refreshEdit="showList"></edit-seal>
      <check-seal :show.sync="isShowCheck" :modifyId="modifyId"></check-seal>

      <!-- 表格 -->
      <el-table :data="tableData" :key='tableKey' v-loading="loading" @selection-change="handleSelectionChange" border stripe>
        <el-table-column type="selection" width="50" align="center" :resizable="false"></el-table-column>
        <el-table-column :index="indexMethod" type="index" label="序号" width="50" align="center" :resizable="false"></el-table-column>
        <el-table-column align="center" :key='item' v-for='item in filterColumnData' :resizable="false"
            :label="getTableHeaderLabel(item)"
            :prop="item"
            :min-width="getTableColumnWidth(item)"
            :fixed="getTableColumnFixed(item)"
            :sortable="getTableColumnSort(item)">
            <template slot-scope="scope">
                {{scope.row[item]}}
                <el-button v-if="item === 'operate'" size="small" type="text" @click="modifyOrder(scope.row)">修改</el-button>
                <el-button v-if="item === 'operate'" size="small" type="text" @click="checkOrder(scope.row)">预览</el-button>
                <el-button v-if="item === 'operate'" size="small" type="text" @click='delElecSeal(scope.row)'>删除</el-button>
                <!-- <el-button v-if="item === 'operate'" size="small" type="text" @click="delElecSeal(scope.row)">启用/禁用</el-button> -->
            </template>
        </el-table-column>
      </el-table>
       <el-row type="flex" justify="center">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizeArr"
          :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
  import JtTableColumnFilter from 'components/jt-table-column-filter/index'; // 导入表格列筛选组件
  import JtEasyCollapse from 'components/jt-easy-collapse/index';
  import AddSeal from 'dialog/system-management/electronic-signature/electronic-seal/add-seal';
  import EditSeal from 'dialog/system-management/electronic-signature/electronic-seal/edit-seal';
  import CheckSeal from 'dialog/system-management/electronic-signature/electronic-seal/check-seal';
  import {
    getElecSealList,
    deleteElecSeal,
    electronicSealAllDelete
  } from "service/task";
  import { STATUS_LIST } from "service/constant";
  import { getLableFromList } from "utils/common";
  export default {
    name: 'ElectronicSignature',
    components: {
      'jt-table-column-filter': JtTableColumnFilter,
      'jt-easy-collapse': JtEasyCollapse,
      'add-seal': AddSeal,
      'edit-seal': EditSeal,
      'check-seal': CheckSeal
    },
    data() {
      return {
        tableKey: 1, // table key
        filterColumnData: [],
        tableHeaderArr: [{
              'name': 'name',
              'alias': '电子公章名称',
              'default': true,
              'width': 110,
              'fixed': false,
              'sort': true
          },
          {
              'name': 'userId',
              'alias': '工号',
              'default': true,
              'width': 110,
              'fixed': false,
              'sort': true
          },
          {
              'name': 'usePosition',
              'alias': '使用位置',
              'default': true,
              'width': 170,
              'fixed': false,
              'sort': true
          },
          {
              'name': 'status',
              'alias': '状态',
              'default': false,
              'width': 80,
              'fixed': false,
              'sort': true
          },
          {
              'name': 'remark',
              'alias': '备注',
              'default': true,
              'width': 80,
              'fixed': false,
              'sort': true
          },
          {
              'name': 'operate',
              'alias': '操作',
              'default': true,
              'width': 190,
              'fixed': 'right',
              'sort': false
          }],
        tableData: [],
        form: {
        usePosition: "",
        name: ""
        },
        loading: false,
        selectCount: 0,
        isShowAdd: false,
        isShowModify: false,
        isShowCheck: false,
        currentPage: 1,
         pageTotal: 0,
        pageSizeArr: [10, 20, 50, 100],
        pageSize: 10,
        modifyId: null
      }
    },
    mounted() {
      this.showList();
    },
    methods: {
       indexMethod(index) {
        return index + this.pageSize * (this.currentPage-1) + 1;
      },
      // 新增
      addOrder() {
        this.isShowAdd = true;
      },
      // 查看
      checkOrder(row) {
        this.modifyId = row.id;
        this.isShowCheck = true;
      },
       // 清除
      clearForm() {
        this.form = {};
        this.showList();
      },

       // 获取表格多选的值
    handleSelectionChange(val) {
      this.selectList = val;
      this.selectCount = val.length;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.showList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.showList();
    },

      // 修改
      modifyOrder(row) {
        this.modifyId = row.id;
        this.isShowModify = true;
      },
       // 表格数据展示
      showList() {
        this.loading = true;
        getElecSealList({
          // this.axios.get('/system/testFieldList', {
          usePosition: this.form.usePosition,
          name: this.form.name,
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          sort: "",
          order: ""
        }).then(res => {
          this.tableData = res.data.result.content;
          // this.currentPage = res.data.result.pageable.pageNumber;
          this.pageSize = res.data.result.pageable.pageSize;
          this.pageTotal = res.data.result.totalElements;
          this.totalElements = res.data.result.totalElements;
          this.loading = false;
          this.tableData.forEach(e => {
            e.statusStr = getLableFromList(STATUS_LIST, this.tableData.status);
          });
        });
      },
      delElecSeal(row) {
         let confirm = this.$confirm('您确定删除吗?','提示',{
          // confirmButtonText: '确定',
          // cancelButtonText: '取消',
          type: 'warning'
        }).then(res => {
         deleteElecSeal(row.id).then(res => {
        if (res.data.success) {
         this.$message({
            message: res.data.message,
            type: 'success',
            duration: 1000
            });
          this.showList();
        }
      });
      }).catch(res => {
         return
     });
    },

    deleteBatch() {
if (this.selectCount <= 0) {
        this.$Message.warning("您还未选择要删除的数据");
        return;
      }
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
        onOk: () => {
          let ids = "";
          this.selectList.forEach(function(e) {
            ids += e.id + ",";
          });
          ids = ids.substring(0, ids.length - 1);
          electronicSealAllDelete({ids: ids.split(",")}).then(res => {
            if (res.data.success === true) {
              this.$Message.success("删除成功");
               this.showList();
            }
          });
        }
      });
    },
      // 表头展示
      getTableHeaderLabel(str) {
        return this.getTableSomeValue(str, 'alias');
      },
      // 获取表格列的宽度
      getTableColumnWidth(str){
        return this.getTableSomeValue(str, 'width');
      },
      // 获取表格列是否是固定的
      getTableColumnFixed(str){
        return this.getTableSomeValue(str, 'fixed');
      },
      // 获取表格列是否排序
      getTableColumnSort(str){
          return this.getTableSomeValue(str, 'sort');
      },
      // 获取表格表头，列宽度，列固定，列排序的值
      getTableSomeValue(str, keyName){
        for (var value of this.tableHeaderArr) {
            if (value['name'] == str) {
                return value[keyName];
            }
        }
      }
    }
  }

</script>
